<template>
    <div>
      <h1>阿里qwen-plus调用示例</h1>
      <textarea v-model="inputText" placeholder="请输入内容"></textarea>
      <button @click="sendRequest">发送请求</button>
      <pre>{{ output }}</pre>
    </div>
  </template>
  
  <script>
  // import axios from 'axios';
  
  export default {
    data() {
      return {
        inputText: '', // 用户输入的内容
        output: '',    // 流式输出的结果
      };
    },
    methods: {
        async sendRequest() {
            try {
                // 使用 fetch API 发起 POST 请求，并设置响应类型为流式
                // const response = await fetch('/api/qwen-plus', { // 生产环境使用
				const response = await fetch('http://localhost:8801/api/qwen-plus', { // 本地测试环境使用
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    content: this.inputText, // 将输入内容序列化为 JSON
                }),
                });

                if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
                }

                // 获取响应的 ReadableStream
                const reader = response.body.getReader();
                const decoder = new TextDecoder();

                this.output = ''; // 清空输出

                // 循环读取流数据
                while (true) {
                const { done, value } = await reader.read();
                if (done) break;

                const chunk = decoder.decode(value, { stream: true }); // 解码二进制数据为文本
                const lines = chunk.split().filter(line => line.trim() !== '');// 按行分割数据块
				// console.log("数据块：" + chunk);
				// console.log("数据行：" + lines);
                for (const line of lines) {
                    // try {
                    //     const parsedChunk = JSON.parse(chunk); // 尝试解析 JSON 数据
                    //     this.output += parsedChunk; // 假设每个数据块包含一个 `message` 字段
                    //     // console.log(chunk);
                    //     //console.log(parsedChunk);
                    // } catch (e) {
                    //     console.warn("非 JSON 数据块:", chunk);
                         this.output += chunk; // 如果不是 JSON，直接拼接
                    // }
                    
                    // this.$nextTick(() => {
                    //     console.log(chunk); // 可选：实时打印接收到的数据块
                    // })
                    }
                 }
            } catch (error) {
                console.error('请求失败:', error);
            }
            }
    },
  };
  </script>
  <style scoped>
  textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
  }
  
  button {
    margin-bottom: 10px;
  }
  
  pre {
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ddd;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  </style>